import React, { useEffect, useState } from 'react'
import { getInfo } from "../../service/mineService"
import {
  Form,
  Input,
  Button,
  Dialog,
  Radio,
  Space,
  Avatar,
  List,
  Modal
} from 'antd-mobile'
import { useNavigate } from "react-router-dom"
import { UserContactOutline, ShopbagOutline, PayCircleOutline, SetOutline, TeamOutline, MessageFill, StarFill, BankcardOutline, GlobalOutline } from 'antd-mobile-icons'


export default function Info() {
  let navigate = useNavigate()
  const [userInfo, setuserInfo] = useState<any>({});
  useEffect(() => {
    getInfo().then(res => {
      setuserInfo(res.data.user);
      console.log(res);
    })
  }, [])

  let img = userInfo.avatar ? "/api2/" + userInfo.avatar : 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.doubanio.com%2Fview%2Frichtext%2Flarge%2Fpublic%2Fp204479195.jpg&refer=http%3A%2F%2Fimg9.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684058094&t=160d384fd7d55591d589a2552cbc635e'
  return (
    <div className='info-all'>
      <div className="div-top">
        <img src={img} />
        <div className='icon'>
          <TeamOutline fontSize={24} color='#fff' />
          <SetOutline fontSize={24} color='#fff' />
        </div>
        <div className='info-main'>
          <p>{userInfo.nickName}</p>
          <br />
          <p>{userInfo.phonenumber}</p>
        </div>
        <button onClick={
          () => {
            navigate('/mine/changeUser', { state: img })
          }
        }>修改信息</button>
      </div>

      <div className='div-center'>
        <div className='center-main'>
          <MessageFill fontSize={32} color='#31dfe9' />
          <p>消息中心</p>
        </div>
        <div className='center-main'>
          <StarFill fontSize={32} color='#af6bf9' />
          <p>我的收藏</p>
        </div>
      </div>

      <div className='div-bottom'>
        <List.Item extra={userInfo.email} prefix={<GlobalOutline color='#1b8fff' />} onClick={() => {
          Modal.alert({
            content: '您的邮箱是' + userInfo.email
          })
        }}>
          e-mail
        </List.Item>
        <List.Item extra={'￥' + userInfo.balance} prefix={<PayCircleOutline color='#ffb233' />} onClick={() => {
          Modal.alert({
            content: '您的余额是 ￥' + userInfo.balance + '，再充点呢'
          })
        }}>
          余额
        </List.Item>
        <List.Item extra={userInfo.score} prefix={<ShopbagOutline color='#b2cf48' />} onClick={() => {
          Modal.alert({
            content: '您的积分是 ￥' + userInfo.score + '，消费不够哇'
          })
        }}>
          账户积分
        </List.Item>
        <List.Item prefix={<UserContactOutline color='#ffc4ce' />} onClick={() => {
          Modal.alert({
            content: '假装这里是联系客服'
          })
        }}>
          帮助与客服
        </List.Item>
        <List.Item prefix={<SetOutline color='#2a9688' />} onClick={() => {
          Modal.alert({
            content: '假装这里有一个设置页面'
          })
        }}>
          设置
        </List.Item>
      </div>

      <Button onClick={() => {
        localStorage.removeItem('token')
        window.location.reload()
      }} block type='button' color='primary' size='large'>
        退出
      </Button>



      {/* <div>头像 <Avatar src={"/api2/" + userInfo.avatar} /></div>
      <div>姓名 {userInfo.userName}</div>
      <div>电话 {userInfo.phonenumber}</div>
      <div>余额 {userInfo.balance}</div>
       */}
    </div >
  )
}
